<template>
	<view>
		<!-- 轮播图模块 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(items,index) in swiperData" :key="index">
					<!-- <view class="swiper-item uni-bg-red">A</view> -->
					<img :src="items.img" alt="" style="width: 100%;height: 100%;" />
				</swiper-item>

			</swiper>
		</view>
		<!-- 消息通知模块 -->
		<view class="infos">
			消息公告
		</view>
		<uni-section style="padding: 0;">
			<uni-notice-bar show-icon scrollable background-color="#eee" color="#000"
				text="欢迎使用敬善金美小程序，我们将为您保驾护航！在这里，您可以享受到最贴心的服务，体验最新的功能，发现更多精彩内容。感谢您的支持与信任，让我们一起开启美好旅程！" />
		</uni-section>
		<!-- 入口模块 -->
		<view class="model_box">
			<view class="model_box_items" v-for="(items,index) in modelData" :key="index">
				<view class="model_box_items_icon">
					<uni-icons :type="items.icon" size="30"></uni-icons>
				</view>
				<view class="model_box_items_contnet">
					{{items.modelName}}
				</view>
			</view>



		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 响应式数据
	const background = ['color1', 'color2', 'color3']
	const indicatorDots = ref(true)
	const autoplay = ref(true)
	const interval = ref(2000)
	const duration = ref(500)
	// 轮播图数据
	const swiperData = ref([{
		img: 'https://img5.bitautoimg.com/usercenter/mapi/news/2024/04/11/w600_m1_yichecar_2f08022973ab433e82fa889735323aab.jpeg.webp'
	}, {
		img: 'https://img5.bitautoimg.com/usercenter/mapi/news/2024/03/13/w600_m1_yichecar_86d899f35db64b9989e44be046ae4a81.jpeg.webp'
	}])
	// 入口模块数据
	const modelData = ref([{
		icon: 'compose',
		modelName: '进件管理'
	}, {
		icon: 'map',
		modelName: '车价评估'
	}, {
		icon: 'help',
		modelName: '开发中'
	}, {
		icon: 'help',
		modelName: '开发中'
	}, {
		icon: 'help',
		modelName: '开发中'
	}, {
		icon: 'help',
		modelName: '开发中'
	}])
	// 方法
	const changeIndicatorDots = () => {
		indicatorDots.value = !indicatorDots.value
	}

	const changeAutoplay = () => {
		autoplay.value = !autoplay.value
	}

	const intervalChange = (e) => {
		interval.value = e.target.value
	}

	const durationChange = (e) => {
		duration.value = e.target.value
	}
</script>

<style>
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.infos {
		width: 100%;
		color: #000;
		font-size: 40rpx;
		text-align: center;
		margin: 40rpx 0 20rpx;
	}

	.uni-section-header {
		padding: 0 !important;
	}

	.model_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}

	.model_box_items {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		/* width:250rpx; */
		height: 200rpx;
		flex: 0 0 calc(33.333%);

	}
</style>